<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="../css/mui.css"/>
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="stylesheet" href="../css/swiper.min.css" />
</head>
<body>
	<!--头部-->
	<header class="mui-bar mui-bar-nav">
			<div class="title-left">
				<a href="#"><img src="../images/saomiao_03.png" /></a>
				<a href="#">扫&nbsp;描</a>
			</div>
			<div class="title-middle">
				<input type="text" placeholder="搜索品牌、商品" />
				<a href="#"><img src="../images/sousuo_03.png" /></a>
			</div>
			<div class="title-right">
				<p>2</p>
				<a href="#"><img src="../images/fenlei_03.png" /></a>
				<a href="#">分&nbsp;类</a>
			</div>
	</header>
	<!--轮播-->
	<div id="slider" class="mui-slider" >
	  <div class="mui-slider-group mui-slider-loop">
	    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
	    <div class="mui-slider-item mui-slider-item-duplicate">
	      <a href="#">
	        <img src="../images/lunbo_02.png">
	      </a>
	    </div>
	    <!-- 第一张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="../images/lunbo_02.png">
	      </a>
	    </div>
	    <!-- 第二张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="../images/lunbo_02.png">
	      </a>
	    </div>
	    <!-- 第三张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="../images/lunbo_02.png">
	      </a>
	    </div>
	    <!-- 第四张 -->
	    <div class="mui-slider-item">
	      <a href="#">
	        <img src="../images/lunbo_02.png">
	      </a>
	    </div>
	    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
	    <div class="mui-slider-item mui-slider-item-duplicate">
	      <a href="#">
	        <img src="../images/lunbo_02.png">
	      </a>
	    </div>
	  </div>
	  <div class="mui-slider-indicator">
	    <div class="mui-indicator mui-active"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	    <div class="mui-indicator"></div>
	  </div>
	</div>
	<!--列表-->
	<ul class="mui-table-view">
	    <li class="mui-table-view-cell">
	    	<a href="#">
	    		<img src="../images/jishiben_03.png" class="exhibits" />
	    		<p class="typeface">每日签到</p>
	    	</a>
	    </li>
	    <li class="mui-table-view-cell">
	    	<a href="#">
	    		<img src="../images/yanglao_03.png" class="exhibits"  />
				<p class="typeface">积分商城</p>
	    	</a>
	    </li>
	    <li class="mui-table-view-cell">
	    	<a href="">
	    		<img src="../images/fangzi_03.png"  class="exhibits" />
	    		<p class="typeface">线下体验馆</p>
	    	</a>
	    </li>
	</ul>
	<!--热门资讯-->
	<div class="consulting">
		<div class="consulting-left">
			<a href="#"><i>热门</i><em>资讯</em></a>
		</div>
		<div class="consulting-right">
			<a href="#">新加坡留学，国际双语课程</a>
		</div>
	</div>
	<!--特价-->
	<ul class="mui-table-view special">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
            	<p>特价促销</p>
            	<span>天天特价，爽不停</span>
            	<img src="../images/naipin_03.png" />
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                <p>人气热卖</p>
            	<span>热卖单品</span>
            	<img src="../images/muzhuang_03.png" />
            </a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                <p>新用户专享</p>
            	<span>开启完美用户体验</span>
            	<img src="../images/heidou_03.png" />
            </a>
        </li>
    </ul>
    <!--banner-->
    <div class="banner">
    	<a href="#"><img src="../images/banner_02.png" /></a>
    </div>
    <!--红墙-->
    <div class="hong">
    	<img src="../images/hong_02.png" />
    	<p><a href="#">每日必看</a></p>
    </div>
    <!--智慧养老-->
    <ul class="mui-table-view provide">
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <img src="../images/yanglao.png" />
                    <p>智慧养老</p>
                    <span>抢购价:￥298.00</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <img src="../images/yanglao.png" />
                    <p>智慧养老</p>
                    <span>抢购价:￥298.00</span>
                </a>
            </li>
            <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <img src="../images/yanglao.png" />
                    <p>智慧养老</p>
                    <span>抢购价:￥298.00</span>
                </a>
            </li>
             <li class="mui-table-view-cell">
                <a class="mui-navigate-right">
                    <img src="../images/yanglao.png" />
                    <p>智慧养老</p>
                    <span>抢购价:￥298.00</span>
                </a>
            </li>
       </ul>
       <!--智慧养老banner-->
       <div class="banner-provide">
       	<a href="#"><img src="../images/banner_02.gif" /></a>
       </div>
        <!--多页轮播-->
       <div class="swiper-container footer">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		    </div>
		</div>
      <!--养生食品-->
       <div class="banner-provide">
       	<a href="#"><img src="../images/shipin_02.gif" /></a>
       </div>
        <!--多页轮播-->
       <div class="swiper-container2 footer">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		    </div>
		</div>
		<!--旅游度假-->
		<div class="banner-provide">
       	<a href="#"><img src="../images/dujia_02.gif" /></a>
       </div>
        <!--多页轮播-->
       <div class="swiper-container footer">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		    </div>
		</div>
		<!--孝心礼品-->
		<div class="banner-provide">
       	<a href="#"><img src="../images/xiaoxin_02.gif" /></a>
       </div>
        <!--多页轮播-->
       <div class="swiper-container3 footer">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		        <div class="swiper-slide">
		        	<ul class="lunbo-1">
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        		<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
		        	</ul>
		        </div>
		    </div>
		</div>
		<!--居家-->
		<div class="banner-provide">
       		<a href="#"><img src="../images/jujia_02.gif" /></a>
		</div>
		<!--多页轮播-->
		<div class="swiper-container button">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<ul class="lunbo-1">
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
					</ul>
				</div>
				<div class="swiper-slide">
					<ul class="lunbo-1">
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
					</ul>
				</div>
				<div class="swiper-slide">
					<ul class="lunbo-1">
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
						<li><a href="#"><img src="../images/youtong_03.gif" /><p>雾化器</p><span>￥298.00</span></a></li>
					</ul>
				</div>
			</div>
		</div>
	<!--页脚-->
	<nav class="mui-bar mui-bar-tab footer-bg">
	    <a class="mui-tab-item mui-active">
	       	<img src="../images/xiaofangzi_03.png" class="house" />
	        <span class="mui-tab-label">首&nbsp;页</span>
	    </a>
	    <a class="mui-tab-item">
	       	<img src="../images/hua_03.png" class="house" />
	        <span class="mui-tab-label">分&nbsp;类</span>
	    </a>
	    <a class="mui-tab-item">
	      	<img src="../images/gouwu_03.png" class="house" />
	        <span class="mui-tab-label">购物车</span>
	    </a>
	    <a class="mui-tab-item">
	    	<img src="../images/renwu_03.png" class="house" />
	        <span class="mui-tab-label">个人中心</span>
	    </a>
	</nav>
    <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/swiper.min.js"></script>
    <script type="text/javascript">
    	mui.init();
    </script>
    <script>
    	var gallery = mui('.mui-slider');
		gallery.slider({
		  interval:3000//自动轮播周期，若为0则不自动播放，默认为0；
		});
	</script>
	<!--多页轮播-->
	<script>        
	  var mySwiper = new Swiper ('.swiper-container', {
	    direction: 'horizontal',
	    loop: true,
	    autoplay:true,
	    speed:2000,
		  autoplay : {
		    delay:2000
		  },
	  }) 
	  var mySwiper = new Swiper ('.swiper-container2', {
	    direction: 'horizontal',
	    loop: true,
	    autoplay:true,
	    speed:3000,
		  autoplay : {
		    delay:3000
		  },
	  }) 
	   var mySwiper = new Swiper ('.swiper-container3', {
	    direction: 'horizontal',
	    loop: true,
	    autoplay:true,
	    speed:3000,
		  autoplay : {
		    delay:2000
		  },
	  }) 
  </script>
</body>
</html>
